<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>项目购买</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" href="../../css/public-heder-Reset.css">
</head>
<style type="text/css">
html{background-color:#fff;}
.textColor{color:#fd7130;}
.payment{width:100%;padding:0 15px;background:#fff;font-size:15px;color:#666666;}	
.payment .Project-name{color:#000;line-height:40px;}
.profit{line-height:25px;padding:0 5px;}
.money{width:100%;height:40px;border:1px solid #ececec;border-radius:6px;overflow:hidden;margin-top:10px;}
.money input{border:none;height:100%;width:100%;color:#555;padding:0 10px;box-sizing:border-box;}
.submit-btn{width:100%;height:40px;padding:0 10px;overflow:hidden;margin-top:40px;}
.submit-btn button{width:100%;height:100%;border-radius:6px;font-size:18px;color:#fff;background:#b7b7b7;}
/*红包选择*/
.gift-box{width:100%;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,.5);display:none;}
.gift{width:300px;background-color:#fff;padding:10px;position:absolute;top:20%;left:50%;margin-left:-150px;border-radius:5px;}
.back-icon{width:30px;height:30px;background-image:url(../../img/icon-close.png);background-position:center;background-size:30px 30px;background-repeat:no-repeat;position:absolute;right:-10px;top:-10px;}
.gift .title{font-size:15px;color:#000;text-align:left;line-height:30px;padding-left:10px;}
.gift-list {width:100%;padding-bottom:5px;border-bottom:1px solid #ececec;}
.gift-list li{width:130px;height:40px;background:#dadada;float:left;margin:5px 5px;border-radius:5px;line-height:40px;text-align:center;overflow:hidden;font-size:12px;color:#000;}
.gift-list li.active{color:#fff;background-color:#fc7231;}
.no_gift{font-size:15px;width:100%;padding:10px;text-align:center;color:#ccc;}
.Investment-amount{font-size:14px;color:#000;padding:5px 10px;line-height:20px;border-bottom:1px solid #ececec;}
.Investment-amount .Investment-money{color:#666;}
.Investment-amount .number{color:#fd7130;}
.okbutn{font-size:14px;text-align:right;}
.okbutn p{line-height:30px;}
.okbutn button{display:inline-block;width:75px;height:30px;background:#6eba6f;font-size:14px;color:#fff;border-radius:4px;}
.total{color:#fc7231;}
button{}
</style>
<body>
	<!-- page_box -->
	<div class="page-box">
		<!-- header -->
		<header class="page-header">
			<a href="javascript:history.go(-1)" class="back"></a>
			<p class="pege-name">投资</p>
		</header>
		<div class="liubai"></div>
		<!-- header /-->
		<div class="payment">
			<p class="Project-name">&nbsp;</p>
			<div class="clear profit">
				<div class="fl" style="width:50%;">预期年化：<span class="profit_rule">0%</span></div>
				<div class="fl" style="width:50%;">投资期限：<span class="profit_rule_num">0天</span></div>
				<div class="">可投金额：<span class="textColor need_money">0.00元</span></div>
				<div class="">账户余额：<span class="textColor user_money">0.00元</span></div>
			</div>
			<div class="money">
				<input type="number" class="eliminate" maxlength="9" placeholder="请输入购买金额，最低0元" />
			</div>
			<div style="color:#000;font-size:14px;padding:10px 5px">预期收益<span class="textColor ExpectedtReturn">0.00</span>元</div>
			<div class="submit-btn">
				<button style="border:none" disabled="disabled" type="submit">我要投资</button>
			</div>
		</div>
		<div class="gift-box">
			<div class="gift">
				<div class="back-icon"></div>
				<p class="title">红包选择</p>
				<ul class="gift-list clear">
				<!-- 异步获取红包 -->
				</ul>
				<div class="Investment-amount">
					<div class="name">投资金额</div>
					<div class="Investment-money"><span class="number">00.00</span>元</div>
				</div>
				<form action="" method="get">
					<input type="hidden" name="SID" value='sss' />
					<input type="hidden" name="money" value='sss' />
					<input type="hidden" name="gift_array" value='sss' />
					<input type="hidden" name="projectsId" value='sss' />
					<input type="hidden" name="callback" value="payment"/>
					<input type="hidden" name="UserData" value="UserData"/>
					<div class="fr okbutn">
						<p>合计金额：<span class="total">00.00</span>元</p>
						<button type="submit">确认</button>
					</div>
				</form>	
			</div>
		</div>
	</div>
	<!-- page_box /-->
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/http-url.js"></script>	
<script type="text/javascript">
	// 红包状态;
	var choose,money,gift_money,istrue;
	// 选择红包;
	function aa(even){
		gift_money=$(even).attr('data-money');
		if ($(even).hasClass('active')==true) {
			$(even).removeClass('active');
			money=parseInt(money)-parseInt(gift_money);
			$('.total').text(money+'.00');
		}else {
			if (choose==0) {
				var set_money=parseInt($('.number').text());
				money=parseInt(set_money)+parseInt(gift_money);
				$(even).addClass('active').siblings('li').removeClass('active');
				$('.total').text(money+'.00');
			}else{
				money=parseInt(money)+parseInt(gift_money);
				$('.total').text(money+'.00');
				$(even).addClass('active');
			}
		}
	};
	$(function(){
		$('input').val('');
		var status,lu,tin,tex,tlu,nem,nummn,mimn,r_tin;
		var projectsId=window.localStorage.getItem("projectsId");
		ajaxRequest('/api/menu/go/to/buy/projects/'+projectsId+'',null,function(data){
			// ajAX渲染页面数据
			istrue=data.data.data.new_project;
			status=data.data.data.status;
			lu=data.data.data.profit_rule_year;
			tin=data.data.data.profit_rule_num;
			r_tin=data.data.data.profit_rule_r_num;
			tex=data.data.data.profit_rule_cate;
			tlu=data.data.data.profit_rule;
			nem=data.data.data.need_money;
			nummn=data.data.data.r_need_money;
			mimn=data.data.data.finance_rule_money;
			maxmn=data.data.data.user_money;
			$('.Project-name').text(data.data.data.title);
			$('.money').find('input').attr('placeholder', '请输入购买金额，最低'+mimn+'元');
			$('.profit_rule').text(lu+'%');
			$('.user_money').text(maxmn+'元')
			$('.profit_rule_num').text(r_tin+tex);
			$('.need_money').text(nem+'元')
		},false);
		$('.money').find('input').on('keyup',function(){
			if($(this).val()>=nummn){
				$(this).val(nummn);
			}
			if ($(this).val()>=mimn) {
				sureSubmit()
			}else {
				cannotSubmit()
			}
			// 预期收益
			$('.ExpectedtReturn').text((~~($(this).val()*tlu*tin))/100);
		});
		// 我要投资点击选择红包
		$('.submit-btn button').click(function(){
			if (!/^\d+$/.test($('.money').find('input').val())){
				if($('.promptBox').length>=1){
					return;
				}
				$('.ExpectedtReturn').text('0.00');
				promptBox('投资金额必须为整数！');
				return;
			}
			if (istrue) {
				promptBox('你不能重复购买新手标');
				$('.ExpectedtReturn').text('0.00');
				cannotSubmit();
				return;
			}
			submitOk()
			money=$('.money').find('input').val().trim();
			var UserData={'money':money,'projectsId':projectsId};
			ajaxRequest('/api/menu/buy/projects/pay',UserData,function(data){
				if (data.m_status!='200') {
					return;
				}
				$('.gift-list').html('');
				var conten="";
				// 判断是否有可使用红包
				if (!data.data.user_can_gift || data.data.user_can_gift.length=='0') {
					conten+='<div class="no_gift">无可使用红包</div>';
				}else{
					for(var i=0;i<data.data.user_can_gift.length;i++){
						// choose储存是否为多选
						choose=data.data.choose_cate;
						conten+='<li onclick="aa(this)" data-money="'+parseInt(data.data.user_can_gift[i].money)+'">'+data.data.user_can_gift[i].name+'</li>'
					};
				};
				$('.gift-list').html('');
				$(conten).appendTo('.gift-list');
				$('.total').text(money+'.00');
				$('.gift-box').show();
				$('.number').text(money+'.00');
			},false);
		});
		
		// 取消红包选择
		$('.back-icon').click(function(){
			$('.gift-box').hide();
			$('input').val('');
			$('.total').text('00'+'.00');
			$('.number').text('00'+'.00');
			$('.ExpectedtReturn').text('0.00');
			cannotSubmit()
		});
		// 确认提交购买
		$("form").submit(function(){
			$(this).attr('action',''+contextPath+'/api/menu/buy/project/pay/do')
			$('.okbutn').find('button').css('backgroundColor','#419242').attr('disabled','disabled');
			var gift_array=new Array();
			var gift_len=$('.gift-list').find('li').length;
			var UserData={'gift_array':gift_array,'money':money,'projectsId':projectsId}
			for(var i=0; i<gift_len; i++){
				if($('.gift-list').find('li').eq(i).hasClass('active')==true){
					gift_array.push(i);
				} 
			}
			$("[name='SID']").val(resid);
			$("[name='callback']").val('payment');
			$("[name='gift_array']").val(gift_array);
			$("[name='money']").val(money);
			$("[name='projectsId']").val(projectsId);
				return true;
		})
	})
</script>
</body>
</html>